<template>
  <div class="room-bg" :style="{ '--imBackground': 'url(' + bgImg + ')' }">
    <div class="room-layout" ref="divCard">
      <!-- <n-card style="height: 100%;padding: 0px;" content-style="padding: 0px;height:100%;"> -->
      <n-card style="height: 100%; padding: 0px" content-style="padding: 0px;">
        <n-layout has-sider style="width: 100%; height: 100%; margin: 0px">
          <n-layout-sider
            bordered
            content-style="padding: 10px;display: flex;flex-direction: column;align-items: center;"
            width="70"
          >
            <div style="cursor: pointer">
              <n-avatar
                :size="38"
                :src="store.state.userInfo == null ? imgUrl : store.state.userInfo.u_Head"
              />
            </div>
            <n-divider style="margin: 10px 0px" />
            <div>
              <!-- <template v-for="item, index in menuList" :key="index">
                                <div class="r-menu-button" ref="menuDiv" @click="menuBtn(index)">
                                    <n-icon size="30" :src="item.icon">
                                        
                                    </n-icon>
                                    <span>{{item.label}}</span>
                                </div>
                            </template> -->
              <div class="r-menu-button" ref="menuDiv1" @click="menuBtn(1)">
                <n-icon size="30">
                  <svg
                    t="1714288806821"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="8864"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M902.384941 257.114353H245.338353a98.454588 98.454588 0 0 0-98.454588 98.424471V746.315294a98.484706 98.484706 0 0 0 98.484706 98.454588h57.675294v141.914353c0 13.914353 16.745412 20.841412 26.593882 11.023059l152.937412-152.937412h419.84a98.484706 98.484706 0 0 0 98.42447-98.484706V355.568941a98.454588 98.454588 0 0 0-98.454588-98.42447"
                      fill="#FF7E50"
                      p-id="8865"
                    ></path>
                    <path
                      d="M98.424471 0h657.046588a98.454588 98.454588 0 0 1 98.484706 98.424471v390.806588a98.424471 98.424471 0 0 1-98.484706 98.42447H697.825882v141.914353a15.570824 15.570824 0 0 1-26.593882 11.023059l-152.997647-152.937412H98.424471A98.454588 98.454588 0 0 1 0 489.231059V98.424471A98.484706 98.484706 0 0 1 98.484706 0"
                      fill="#F9D11F"
                      p-id="8866"
                    ></path>
                    <path
                      d="M671.232 740.592941a15.600941 15.600941 0 0 0 26.624-11.023059v-141.94447h57.645176a98.394353 98.394353 0 0 0 98.424471-98.424471V257.084235H245.338353a98.424471 98.424471 0 0 0-98.424471 98.424471v232.116706h371.350589l152.967529 152.997647z"
                      fill="#ED4042"
                      p-id="8867"
                    ></path>
                    <path
                      d="M303.043765 468.269176h394.812235V358.098824H303.043765z"
                      fill="#FFFFFF"
                      p-id="8868"
                    ></path>
                  </svg>
                </n-icon>
                <span>聊天</span>
              </div>
              <div class="r-menu-button" ref="menuDiv2" @click="menuBtn(2)">
                <n-icon size="30">
                  <svg
                    t="1714289415388"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="35689"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M393.6 468.8c-123.2 0-224-100.8-224-224s100.8-224 224-224 224 100.8 224 224-100.8 224-224 224z m0-366.4c-78.4 0-144 64-144 144s64 144 144 144 144-64 144-144-64-144-144-144zM683.2 992H104c-48 0-88-40-88-88v-118.4c0-150.4 115.2-248 294.4-248h166.4c179.2 0 294.4 97.6 294.4 248v118.4c0 48-40 88-88 88zM310.4 617.6c-49.6 0-214.4 12.8-214.4 168v118.4c0 4.8 3.2 8 8 8h579.2c4.8 0 8-3.2 8-8v-118.4c0-155.2-164.8-168-214.4-168H310.4z"
                      fill="#E74D31"
                      p-id="35690"
                    ></path>
                    <path
                      d="M784 523.2c-83.2 0-150.4-67.2-150.4-150.4S700.8 224 784 224s150.4 67.2 150.4 150.4-68.8 148.8-150.4 148.8zM784 304c-38.4 0-70.4 32-70.4 70.4s32 70.4 70.4 70.4 70.4-32 70.4-70.4-32-70.4-70.4-70.4zM948.8 876.8h-96c-22.4 0-40-17.6-40-40s17.6-40 40-40h84.8V736c0-76.8-78.4-84.8-112-84.8-22.4 0-40-17.6-40-40s17.6-40 40-40c116.8 0 192 64 192 164.8v70.4c0 40-30.4 70.4-68.8 70.4z"
                      fill="#ED8242"
                      p-id="35691"
                    ></path>
                  </svg>
                </n-icon>
                <span>好友</span>
              </div>
              <div class="r-menu-button" ref="menuDiv3" @click="menuBtn(3)">
                <n-icon size="30">
                  <svg
                    t="1714370236072"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="21015"
                    data-spm-anchor-id="a313x.search_index.0.i24.f9d53a81ZddTkI"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M371 299.8c0 76.1 61.7 137.8 137.8 137.8 76.1 0 137.8-61.7 137.8-137.8 0-76.1-61.7-137.8-137.8-137.8-76.1 0-137.8 61.7-137.8 137.8M498.4 862c110.5 0 208.9-23.5 272-60.1 0.6-8.8 1.1-17.6 1.1-26.6 0-162.7-116.1-294.7-259.5-294.7s-259.5 132-259.5 294.7c0 13.9 0.8 27.7 2.6 41.2 62.3 28.2 148.3 45.5 243.3 45.5z"
                      fill="#1afa29"
                      p-id="21016"
                      data-spm-anchor-id="a313x.search_index.0.i23.f9d53a81ZddTkI"
                      class="selected"
                    ></path>
                    <path
                      d="M736.2 379.8c0 41.4 33.6 75 75 75s75-33.6 75-75-33.6-75-75-75c-41.4 0.1-75 33.6-75 75M812.8 478.4c-40.2 0-76.6 19.2-102.4 49.8 43.1 29.3 74.5 87.8 81.9 157.3 4.3 0.2 8.7 0.2 13.1 0.2 60.1 0 113.7-12.8 148-32.7 0.3-4.8 0.6-9.6 0.6-14.4 0-88.5-63.2-160.2-141.2-160.2zM137.9 379.8c0 41.4 33.6 75 75 75s75-33.6 75-75-33.6-75-75-75c-41.5 0.1-75 33.6-75 75M211.2 478.4c40.2 0 76.6 19.2 102.4 49.8-43.1 29.3-74.5 87.8-81.9 157.3-4.3 0.2-8.7 0.2-13.1 0.2-60.1 0-113.7-12.8-148-32.7-0.3-4.8-0.6-9.6-0.6-14.4 0.1-88.5 63.1-160.2 141.2-160.2z"
                      fill="#FFD800"
                      p-id="21017"
                      data-spm-anchor-id="a313x.search_index.0.i22.f9d53a81ZddTkI"
                      class=""
                    ></path>
                  </svg>
                </n-icon>
                <span>群聊</span>
              </div>
            </div>
          </n-layout-sider>
          <n-layout-sider bordered content-style="padding: 0px;" width="250">
            <div v-show="region == 1" class="">
              <!-- <div style="padding: 15px;position: absolute;background: #ffffff;top: 0;width: 220px;"> -->
              <div style="padding: 15px">
                <n-input placeholder="搜索" style="width: 200px" size="small">
                  <template #prefix>
                    <n-icon :component="SearchOutline" />
                  </template>
                </n-input>
              </div>
              <!-- <div style="max-height: 100%;overflow: auto;"> -->
              <div style="margin-top: 0px">
                <n-scrollbar
                  style="
                    max-height: min(
                      calc(100vh - var(--scrollbar-height)),
                      var(--max-height)
                    );
                  "
                >
                  <div
                    v-for="(item, index) in chatHistoryList"
                    :key="index"
                    class="r-region1"
                    :class="{ 'cr-select': item.isSelect }"
                    @click="btnSelect(index)"
                  >
                    <n-avatar :size="48" :src="item.head" />
                    <div
                      style="
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                      "
                    >
                      <div style="font-size: 15px">{{ item.remark }}</div>
                      <div style="font-size: 10px; color: #c8c3c3">
                        {{
                          item.latestInfo.length > 13
                            ? item.latestInfo.substring(0, 13) + "..."
                            : item.latestInfo
                        }}
                      </div>
                    </div>
                    <div style="display: flex; align-items: flex-end">
                      <n-dropdown
                        trigger="hover"
                        :options="options"
                        @select="handleSelect"
                      >
                        ...
                      </n-dropdown>
                    </div>
                  </div>
                </n-scrollbar>
              </div>
            </div>
            <div v-show="region == 2">
              <div style="padding: 15px">
                <n-input placeholder="搜索" style="width: 200px" size="small">
                  <template #prefix>
                    <n-icon :component="SearchOutline" />
                  </template>
                </n-input>
              </div>
              <div
                style="
                  padding: 15px;
                  display: flex;
                  align-items: center;
                  gap: 30px;
                  font-weight: 700;
                  cursor: pointer;
                "
              >
                <n-icon size="40">
                  <svg
                    t="1714442900043"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="28919"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M192.016905 832.910798a418.1 452.1 44.999 1 0 639.354793-639.37711 418.1 452.1 44.999 1 0-639.354793 639.37711Z"
                      fill="#3DA8F5"
                      p-id="28920"
                    ></path>
                    <path
                      d="M538.2 544.9c-2.7-0.9-20-8.7-9.2-41.5h-0.1c28.1-29 49.7-75.7 49.7-121.6 0-70.6-47-107.7-101.6-107.7-54.6 0-101.3 37-101.3 107.7 0 46.1 21.4 93 49.7 121.9 11 29-8.7 39.7-12.9 41.2-57.2 20.7-124.3 58.4-124.3 95.6v13.9c0 50.7 98.3 62.2 189.3 62.2 91.1 0 188.1-11.5 188.1-62.2v-13.9c0-38.4-67.4-75.8-127.4-95.6z m0 0"
                      fill="#FFFFFF"
                      p-id="28921"
                    ></path>
                    <path
                      d="M690.3 398.5c-42.1 0-76.3 34.2-76.3 76.3s34.2 76.3 76.3 76.3c42.1 0 76.3-34.2 76.3-76.3s-34.2-76.3-76.3-76.3z m46.1 87.4h-35v35c0 6.1-5 11.1-11.1 11.1s-11.1-5-11.1-11.1v-35h-35c-6.1 0-11.1-5-11.1-11.1s5-11.1 11.1-11.1h35v-35c0-6.1 5-11.1 11.1-11.1s11.1 5 11.1 11.1v35h35c6.1 0 11.1 5 11.1 11.1 0 6.2-5 11.1-11.1 11.1z"
                      fill="#FFFFFF"
                      p-id="28922"
                    ></path>
                  </svg>
                </n-icon>
                <div>好友申请</div>
              </div>
              <n-divider
                dashed
                style="padding: 0px 10px; font-size: 10px; margin: 10px 0px"
              >
                {{ friendList.length }} 位联系人
              </n-divider>
              <div
                v-for="(item, index) in friendList"
                :key="index"
                class="r-region1"
                :class="{ 'cr-select': item.isSelect }"
                @click="btnSelectFriend(index)"
                style="
                  padding: 15px;
                  display: flex;
                  align-items: center;
                  gap: 30px;
                  font-weight: 700;
                  cursor: pointer;
                "
              >
                <n-avatar :size="40" :src="item.head" />
                <div>
                  {{ item.remark }}
                </div>
              </div>
            </div>
            <div v-show="region == 3">区域3</div>
          </n-layout-sider>
          <template v-if="title != null">
            <div class="r-content-layout">
              <div style="background-color: #f3f3f3">
                <div
                  style="
                    background: #ffffff;
                    padding: 15px;
                    font-size: 20px;
                    font-weight: 700;
                  "
                >
                  <span>{{ title }}</span>
                </div>

                <n-scrollbar
                  ref="scrollableDiv"
                  style="
                    max-height: min(
                      calc(100vh - var(--scrollbar-height) - 200px),
                      calc(var(--max-height) - 164px)
                    );
                  "
                >
                  <div ref="chatRecordsRef">
                    <chatRecords :recordsList="recordsList"></chatRecords>
                  </div>
                </n-scrollbar>
              </div>
              <div style="width: 100%">
                <div style="display: flex; gap: 10px; align-items: center">
                  <n-icon size="30" class="r-icon">
                    <svg
                      t="1714309968868"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="7157"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M512 512.8704m-432.3328 0a432.3328 432.3328 0 1 0 864.6656 0 432.3328 432.3328 0 1 0-864.6656 0Z"
                        fill="#B688FF"
                        p-id="7158"
                      ></path>
                      <path
                        d="M287.0272 418.7136c-85.0432 0-160.4096 41.3696-207.104 105.0624 4.5568 182.7328 122.368 337.3056 285.952 396.032 103.2192-33.28 177.92-130.048 177.92-244.3776 0-141.7216-114.944-256.7168-256.768-256.7168z"
                        fill="#C3A4FF"
                        p-id="7159"
                      ></path>
                      <path
                        d="M699.392 741.888H334.848c-57.8048 0-104.6528-46.848-104.6528-104.6528V388.5568c0-57.8048 46.848-104.6528 104.6528-104.6528h364.5952c57.8048 0 104.6528 46.848 104.6528 104.6528v248.6784c-0.0512 57.7536-46.8992 104.6528-104.704 104.6528z"
                        fill="#FFFFFF"
                        p-id="7160"
                      ></path>
                      <path
                        d="M727.04 420.1472c-20.1728-29.1328-62.6176-30.976-85.248-3.6352l-147.456 178.2784-47.2576-61.184c-19.9168-25.7536-58.0608-27.904-80.7424-4.5568l-132.2496 136.2432c12.288 44.1344 52.6848 76.4928 100.7104 76.4928h364.544c57.8048 0 104.6528-46.848 104.6528-104.6528v-105.8816L727.04 420.1472z"
                        fill="#D7C7FF"
                        p-id="7161"
                      ></path>
                      <path
                        d="M372.8384 389.888m-43.1616 0a43.1616 43.1616 0 1 0 86.3232 0 43.1616 43.1616 0 1 0-86.3232 0Z"
                        fill="#B688FF"
                        p-id="7162"
                      ></path>
                    </svg>
                  </n-icon>
                  <emoji class="r-icon" @getEmoji="getEmoji" :size="23" />
                </div>

                <n-input
                  style="
                    --n-border-focus: 0px solid #f9b6f3;
                    --n-border-hover: 0px solid #f9b6f3;
                    --n-border: 0px solid rgb(224, 224, 230);
                    --n-box-shadow-focus-error: 0 0 0 2px rgb(255 255 255 / 20%);
                    --n-box-shadow-focus: 0 0 0 2px rgb(255 255 255 / 20%);
                  "
                  class="parent-div"
                  v-model:value="inputContent"
                  type="textarea"
                  placeholder="说点什么吧，我会好好听的"
                  :autosize="{
                    minRows: 3,
                    maxRows: 3,
                  }"
                >
                  <template #suffix>
                    <div style="width: 100%; display: flex; justify-content: flex-end">
                      <div
                        class="leave-btn"
                        ref="leaveBtn"
                        :class="{
                          focused: isContent,
                          'not-focused': !isContent,
                        }"
                      >
                        <div style="display: flex; align-items: center">
                          <n-button
                            strong
                            secondary
                            style="gap: 10px"
                            @click="sendInfo()"
                          >
                            <div style="display: flex; gap: 5px">
                              <n-icon :size="15">
                                <svg
                                  t="1714355261427"
                                  class="icon"
                                  viewBox="0 0 1024 1024"
                                  version="1.1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  p-id="11241"
                                  width="200"
                                  height="200"
                                >
                                  <path
                                    d="M955 125.6c-4.5-12.5-15.4-21.8-28.6-24.2-9.2-1.7-18.4 0.1-26.1 4.8L83.9 544.3c-12.8 6.8-20.6 20.6-19.8 35.1 0.8 14.3 9.9 27.3 23.2 32.9l238.5 97.9c12.4 5.2 26.8 3.4 37.5-4.9s16.1-21.3 14.4-34.8c-1.6-13.2-10.4-24.6-23-29.9l-165-67.7 573-307.3-357 421.9c-6.5 7.7-9.6 17.4-8.8 27.4L411.4 884c1.6 19.7 17.7 34.6 37.5 34.6 9.5 0 18.7-3.7 25.8-10.4l74-69.2 0.1-0.1c13.5-13.2 15.2-33.5 4.8-48.4l222.6 72c4 1.3 7.9 2 11.7 2 18.2 0 33.8-12.9 37-30.6l131.6-688.3h-0.1c1.4-6.6 0.9-13.5-1.4-20zM497.3 783.8L479.9 800l-6.5-75.9L856 271.6l-96.8 506.3L539 706.6c-19.7-6.4-41.1 4.4-47.5 24.2-5.8 17.9 2.5 37.1 18.9 45.4-4.7 1.5-9.2 4-13.1 7.6z"
                                    p-id="11242"
                                    fill="#18a058"
                                  ></path>
                                </svg>
                              </n-icon>
                              <span style="font-size: 15px; color: #18a058">送信</span>
                            </div>
                          </n-button>
                        </div>
                      </div>
                    </div>
                  </template>
                </n-input>
              </div>
            </div>
          </template>
          <div
            v-else
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <n-icon size="70" color="#ec7de2">
              <LogoXing />
            </n-icon>
          </div>
        </n-layout>
      </n-card>
    </div>
  </div>
</template>

<script setup>
import bgImg from "@/assets/img/roomBgImg.jpg";
import { onMounted, ref, watch, nextTick } from "vue";
import { SearchOutline, LogoXing } from "@vicons/ionicons5";
import chat from "@/assets/img/chatRoom/chat.png";
import friend from "@/assets/img/chatRoom/friend.png";
import groupChat from "@/assets/img/chatRoom/groupChat.png";
import imgUrl from "@/assets/img/head.jpg";
import chatRecords from "./chatRecords.vue";
import { useStore } from "vuex";
import useWebSocket from "@/utils/websocket";
import { getAllSocket, sendSocket } from "@/api/chatRoom";

const store = useStore();
const divCard = ref();
const scale = ref(0);
const menuDiv = ref();
const menuList = ref([
  {
    label: "聊天",
    icon: chat,
  },
  {
    label: "好友",
    icon: friend,
  },
  {
    label: "群聊",
    icon: groupChat,
  },
]);
const menuDiv1 = ref(null);
const menuDiv2 = ref(null);
const menuDiv3 = ref(null);
const region = ref(1); //区域
const isContent = ref(false);
const inputContent = ref();
const leaveBtn = ref();
const options = [
  {
    label: "置顶",
    key: "置顶",
  },
  {
    label: "标记未读",
    key: "标记未读",
  },
  {
    label: "删除聊天",
    key: "删除聊天",
  },
];
const recordsList = ref([
  {
    content: "胆小鬼连幸福都害怕，碰到棉花也会受伤，有时还被幸福所伤。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "人活着不过是为了几个数字。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content:
      "压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "活在当下，珍惜眼下。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "胆小鬼连幸福都害怕，碰到棉花也会受伤，有时还被幸福所伤。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "人活着不过是为了几个数字。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content:
      "压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "活在当下，珍惜眼下。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "胆小鬼连幸福都害怕，碰到棉花也会受伤，有时还被幸福所伤。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "人活着不过是为了几个数字。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content:
      "压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。压力不会转化成动力。热情才会转化成动力，压力只会转化成病历。",
    isMaster: false,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
  {
    content: "活在当下，珍惜眼下。",
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
  },
]);
const chatHistoryList = ref([
  {
    name: "北极星",
    remark: "帅哥",
    head: imgUrl,
    isTop: true,
    latestInfo: "来了老弟",
    unreadInfo: 10,
    isSelect: false,
  },
  {
    name: "消炎",
    remark: "炎帝",
    head: imgUrl,
    isTop: false,
    latestInfo: "我反手就是一个佛怒火莲",
    unreadInfo: 10,
    isSelect: false,
  },
  {
    name: "王腾他爹",
    remark: "坑货",
    head: imgUrl,
    isTop: false,
    latestInfo: "我儿王腾有大帝之资",
    unreadInfo: 10,
    isSelect: false,
  },
  {
    name: "唐三",
    remark: "🐶🍬三",
    head: imgUrl,
    isTop: false,
    latestInfo: "你已有取死之道，看我亲妈缠绕，看我亲妈缠绕，看我亲妈缠绕",
    unreadInfo: 10,
    isSelect: false,
  },
]);
const friendList = ref([
  {
    name: "北极星",
    head: imgUrl,
    remark: "帅哥",
    sex: "薛定谔的猫",
    intro: "遇事不决，请问春风。",
    isSelect: false,
  },
  {
    name: "消炎",
    head: imgUrl,
    remark: "炎帝",
    sex: "男",
    intro: "三十年河东，三十年河西。",
    isSelect: false,
  },
  {
    name: "唐三",
    head: imgUrl,
    remark: "🐶🍬三",
    sex: "死人",
    intro: "看我亲妈缠绕。",
    isSelect: false,
  },
]);
const scrollableDiv = ref(null);
const chatRecordsRef = ref(null);
const title = ref(null);
const wsOptions = {
  url: "ws://192.168.50.243:9527/polaris",
};
const socketId = ref();

const { open, close, reconnect, on, send } = useWebSocket(wsOptions);

watch(
  () => inputContent.value,
  (newValue) => {
    if (newValue == null || newValue == "" || newValue == undefined) {
      isContent.value = false;
      // leaveBtn.value[0].style.opacity = 0;
    } else {
      isContent.value = true;
      // leaveBtn.value[0].style.opacity = 1;
    }
  }
);
watch(
  () => recordsList.value,
  () => {
    scrollableDiv.value.scrollBy(0, chatRecordsRef.value.scrollHeight);
  }
);
onMounted(async () => {
  //在onMounted钩子中调用open函数，链接websocke
  open();

  // 注册消息接收处理函数
  on("message", (data) => {
    console.log(data);
    window.$message.info(data);
    if (data.includes("socketId")) {
      let id = data.split("socketId:")[1];
      socketId.value = id;

      let errCount = 0;
      var timer = setInterval(() => {
        getAllSocket({ socketId: id })
          .then((res) => {
            res.forEach((d) => {
              if (!chatHistoryList.value.some((item) => item.id == d))
                chatHistoryList.value.push({
                  id: d,
                  name: d,
                  remark: d,
                  head: imgUrl,
                  isTop: false,
                  latestInfo: "我儿王腾有大帝之资",
                  unreadInfo: 10,
                  isSelect: false,
                });
            });
          })
          .catch((err) => {
            errCount++;
            if (errCount >= 3) {
              clearInterval(timer);
            }
          });
      }, 1000);
    }
  });
  setTimeout(() => {
    send("{getSocketId:0}");
  }, 1000);

  menuDiv1.value.style.color = "#d590d9";
  menuDiv2.value.style.color = "#000000";
  menuDiv3.value.style.color = "#000000";

  scrollableDiv.value?.scrollBy(0, chatRecordsRef.value.scrollHeight);
});
const menuBtn = (index) => {
  region.value = index;
  switch (index) {
    case 1:
      menuDiv1.value.style.color = "#d590d9";
      menuDiv2.value.style.color = "#000000";
      menuDiv3.value.style.color = "#000000";
      break;
    case 2:
      menuDiv1.value.style.color = "#000000";
      menuDiv2.value.style.color = "#d590d9";
      menuDiv3.value.style.color = "#000000";
      break;
    case 3:
      menuDiv1.value.style.color = "#000000";
      menuDiv2.value.style.color = "#000000";
      menuDiv3.value.style.color = "#d590d9";
      break;
  }

  // for (let i = 0; i < menuDiv.value.length; i++) {
  //     if (i == index) {
  //         console.log(menuDiv.value[i].style.color)
  //         menuDiv.value[i].style.color = '#d590d9'
  //     } else {
  //         menuDiv.value[i].style.color = '#FFFFFF'
  //     }
  // }
};
const sendInfo = () => {
  recordsList.value.push({
    content: inputContent.value,
    isMaster: true,
    head: imgUrl,
    time: "2024-04-29 09:05:12",
    isAdd: true,
  });
  setTimeout(() => {
    scrollableDiv.value.scrollBy(0, chatRecordsRef.value.scrollHeight);
  }, 1);

  var id = chatHistoryList.value
    .filter((item) => item.isSelect)
    .map((item) => item.id)[0];
  sendSocket({
    sendSocketId: socketId.value,
    socketId: id,
    message: inputContent.value,
  }).then((res) => {});
  console.log(id);
};
const btnSelect = (index) => {
  title.value = chatHistoryList.value[index].remark;
  for (let i = 0; i < chatHistoryList.value.length; i++) {
    if (index == i) {
      chatHistoryList.value[i].isSelect = true;
    } else {
      chatHistoryList.value[i].isSelect = false;
    }
  }
  setTimeout(() => {
    scrollableDiv.value?.scrollBy(0, chatRecordsRef.value.scrollHeight);
  }, 1);
};
const btnSelectFriend = (index) => {
  title.value = chatHistoryList.value[index].remark;
  for (let i = 0; i < friendList.value.length; i++) {
    if (index == i) {
      friendList.value[i].isSelect = true;
    } else {
      friendList.value[i].isSelect = false;
    }
  }
};
const getEmoji = (val) => {
  const textarea = textInput.value[inputIndex.value].$el.querySelector("textarea");
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  window.$message.success(startPos + "---" + endPos);

  const newText =
    ruleForm.content.substring(0, startPos) +
    val +
    ruleForm.content.substring(endPos, ruleForm.content.length);

  ruleForm.content = newText;

  textarea.dispatchEvent(new Event("textarea"));

  // 调整光标位置
  const newCursorPos = startPos;

  textarea.focus();
  setTimeout(() => {
    textarea.setSelectionRange(newCursorPos, newCursorPos);
  }, 10);
};
</script>

<style scoped>
::-webkit-scrollbar {
  /* display: none; */
  width: 5px;
  margin-right: 10px;
  /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #d3d0d0 !important;
  /* 滚动条轨道颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #958f8f !important;
  /* 滚动条滑块颜色 */
  /* border-radius: 8px; */
  /* 滑块圆角 */
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #908f8f !important;
  /* 滑块悬停颜色 */
}

.room-bg {
  height: 100vh;
  width: 100vw;
  background: var(--imBackground) 50% / cover no-repeat;
  user-select: none;
}

.room-layout {
  width: 1000px;
  height: 650px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  --scrollbar-height: 140px;
  --max-height: 590px;
}

@media screen and (max-width: 1200px) {
  .room-layout {
    width: calc(100% - 100px);
  }
}

@media screen and (max-width: 1000px) {
  .room-layout {
    width: 100%;
    height: 100%;
    --scrollbar-height: -600px;
    --max-height: calc(100vh - 60px);
  }
}

@media screen and (max-height: 700px) {
  .room-layout {
    width: 100%;
    height: 100%;
    --scrollbar-height: 25px;
    /* --max-height: 690px; */
    --max-height: calc(100vh - 0px);
  }
}

.r-content-layout {
  display: grid;
  grid-template-rows: auto 160px;
  width: 100%;
}

.r-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px 0px;
  font-weight: 700;
}

/* .r-menu-button:hover{
    background: #d1d1d4;
} */

.leave-btn {
  display: flex;
  align-items: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform-origin: top left;
  /* transform: translateY(100%); */
  opacity: 0;
  gap: 10px;
}

.leave-btn:hover {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform-origin: top left;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.focused {
  opacity: 1;
  animation: fly-in 0.3s ease forwards;
  /* 使用飞入的动画效果 */
}

.not-focused {
  opacity: 0;
  animation: fly-out 0.5s forwards;
}

@keyframes fly-in {
  0% {
    transform: translateY(100%);
    /* margin-top: 100%; */
  }

  100% {
    transform: translateY(0%);
    /* margin-top: auto; */
  }
}

@keyframes fly-out {
  0% {
    transform: translateY(0%);
    /* margin-top: 0%; */
  }

  100% {
    transform: translateY(100%);
    /* margin-top: 100%; */
  }
}

>>> .parent-div > div:first-child {
  display: flex !important;
  flex-direction: column !important;
}

.r-icon {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.r-icon:hover {
  transform: scale(1.1);
}

.r-region1 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin: 0px;
  padding: 10px 10px;
  gap: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.r-region1:hover {
  background: #d3d0d0;
}

.r-region1:last-child {
  margin-right: 0;
  /* 最后一个元素不留右边距 */
  margin-left: auto;
  /* 将最后一个元素推到最右边 */
}

.cr-select {
  background: #d18ab1;
}
</style>
